<template>
  <!-- 系统功能-定时任务 -->
  <div class="app-container">
    <div class="mainbox">
      <!-- 顶部操作 -->
      <div class="filter-container">
        <el-form ref="filterFormRef" :model="filterForm" :inline="true">
          <el-form-item label="任务名称" prop="timerName">
            <el-input v-model.trim="filterForm.timerName" maxlength="30" clearable
                      placeholder="请输入内容" class="filter-item limit" @keyup.enter.native="handleFilter" />
          </el-form-item>
          <el-form-item prop="jobStatus" label="任务状态">
            <el-select
              v-model.trim="filterForm.jobStatus"
              clearable
            >
              <el-option
                v-for="item in statusList"
                :key="item.id"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <div class="flex-1" />
        <el-button class="filter-item" type="primary" @click="handleFilter">  搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>
      <!-- 表格 -->
      <div class="table-container table-fullscreen">
        <div class="table-opt-container">
          <el-button v-permission="['SYS_TIMER_ADD_BUTTON']" type="primary" class="filter-item"
                     icon="el-icon-plus" @click="addTimer"> 新增</el-button>
          <el-button v-permission="['SYS_TIMER_LOG_BUTTON']" class="filter-item" @click="toTimerLog"> 任务日志</el-button>
          <div class="flex-1" />
          <dt-dialog-column :columns="columns" @queryTable="getList" />
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="timersList"
          highlight-current-row
          style="width: 100%;"
          :header-cell-style="headerCellStyle"
          border
          @sort-change="sortChange"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            :index="table_index"
          />
          <el-table-column
            v-if="columns[0].show"
            key="timerName"
            align="center"
            prop="timerName"
            label="任务名称"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[1].show"
            key="actionClass"
            align="center"
            prop="actionClass"
            label="任务CLASS"
            show-overflow-tooltip
          >
            <!-- <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>{{ scope.row.actionClass }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.actionClass.slice(0,8) }}</el-tag>
                </div>
              </el-popover>
            </template> -->
          </el-table-column>
          <el-table-column
            v-if="columns[2].show"
            key="cron"
            align="center"
            prop="cron"
            label="CRON表达式"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[3].show"
            key="params"
            align="center"
            prop="params"
            label="任务参数"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[4].show"
            key="remark"
            align="center"
            prop="remark"
            label="备注"
            show-overflow-tooltip
          />
          <el-table-column
            v-if="columns[5].show"
            key="jobStatus"
            prop="jobStatus"
            align="center"
            class-name="status-col"
            label="任务状态"
            fixed="right"
          >
            <template slot-scope="{ row}">
              <el-switch
                :value="row.jobStatus"
                :active-value="1"
                :inactive-value="2"
                @change="statusChange(row.jobStatus, row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            :key="Math.random()"
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
            fixed="right"
            width="288px"
          >
            <template slot-scope="{ row }">
              <el-button
                v-permission="['SYS_TIMER_SEE_BUTTON']"
                size="mini"
                style="padding: 7px"
                @click="toDetail(row)"
              >
                查看
              </el-button>
              <el-button
                v-permission="['SYS_TIMER_RUNONCE_BUTTON']"
                size="mini"
                style="padding: 7px"
                @click="handleRunOnce(row)"
              >
                执行一次
              </el-button>
              <el-button
                v-permission="['SYS_TIMER_UPDATE_BUTTON']"
                size="mini"
                style="padding: 7px"
                @click="updateTimer(row)"
              >
                修改
              </el-button>
              <el-button
                v-permission="['SYS_TIMER_DEL_BUTTON']"
                type="danger"
                size="mini"
                style="padding: 7px"
                :disabled="row.jobStatus==1"
                title="确定删除吗？"
                @click="deleteTimer(row)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <dt-pagination
          v-show="total > 0"
          :total="total"
          :page.sync="filterForm.pageNo"
          :limit.sync="filterForm.pageSize"
          @pagination="getList"
        />
      </div>
      <!-- 新增、修改任务 -->
      <TimerEdit ref="TimerEditRef" />
    </div>
  </div>
</template>
<script>
import sysTimersApi from '@/framework/api/sysTimers'
import dialogColumn from '@/framework/utils/mixins/dialogColumn'
import TimerEdit from './components/TimerEdit.vue'

export default {
  name: 'SysTimer',
  components: {
    TimerEdit
  },
  mixins: [dialogColumn],
  data() {
    return {
      filterForm: {
        pageNo: 1,
        pageSize: 10,
        jobStatus: '',
        timerName: ''
      },
      total: 0,
      statusList: [
        { id: 2, name: '运行', value: '1' },
        { id: 3, name: '停止', value: '2' }
      ],
      timersList: [],
      listLoading: true,
      headerCellStyle: {
        backgroundColor: '#f2f2f2'
      },
      timersListLength: 0,
      // 列信息
      columns: [
        { prop: 'timerName', label: '任务名称', show: true },
        { prop: 'actionClass', label: '任务CLASS', show: true },
        { prop: 'cron', label: 'CRON表达式', show: true },
        { prop: 'params', label: '任务参数', show: true },
        { prop: 'remark', label: '备注', show: true },
        { prop: 'jobStatus', label: '任务状态', show: true }
      ],
      titleMessage: ''
    }
  },
  created() {
    this.handleFilter()
  },
  methods: {
    // 执行一次
    handleRunOnce(row) {
      sysTimersApi.runOnce({ timerId: row.timerId }).then((res) => {
        this.$dtMessage({
          type: 'success',
          message: '任务已执行，可通过任务日志查看执行结果'
        })
        this.getList()
      })
    },
    toTimerLog() {
      this.$router.push({
        name: 'TaskLog'
      })
    },
    handleReset() {
      this.$refs.filterFormRef.resetFields()
      this.handleFilter()
    },
    sortChange(data) {
    },
    handleFilter() {
      this.filterForm.pageNo = 1
      this.getList()
    },
    getList() {
      this.listLoading = true
      sysTimersApi.fetchPage(this.filterForm).then((res) => {
        this.timersList = res.data.rows
        this.timersListLength = res.data.rows.length
        this.total = res.data.totalRows
        this.listLoading = false
      })
    },
    statusChange(v, row) {
      if (v == '2') {
        this.titleMessage = '启用'
      } else {
        this.titleMessage = '停用'
      }
      this.$dtMessageBox({ title: '提示', message: `确定要${this.titleMessage}“${row.timerName}”任务吗?`, type: 'warning' }).then(() => {
        sysTimersApi.changeStatus(row.timerId, v).then((res) => {
          this.getList()
          if (v == '2') {
            this.$dtMessage({
              title: '成功',
              message: '开启成功',
              type: 'success',
              duration: 2000
            })
          } else {
            this.$dtMessage({
              title: '成功',
              message: '停用成功',
              type: 'success',
              duration: 2000
            })
          }
        })
      })
    },
    addTimer() {
      this.$refs.TimerEditRef.handleTimer('', 'create')
    },
    updateTimer(row) {
      this.$refs.TimerEditRef.handleTimer(row, 'update')
    },
    toDetail(row) {
      this.$refs.TimerEditRef.handleTimer(row, 'see')
    },
    deleteTimer(row) {
      this.$dtMessageBox({ title: '提示', message: `确认要删除"${row.timerName}"任务吗？`, type: 'warning' }).then(() => {
        sysTimersApi.delete(row).then((res) => {
          this.getList()
          this.$dtMessage({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {
      })
    },
    table_index(index) {
      return (this.filterForm.pageNo - 1) * this.filterForm.pageSize + index + 1
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
